<script setup>
import WindowMenu from './WindowMenu.vue'
import NoticeTab from './NoticeTab.vue'
import UserAvatar from './UserAvatar.vue'
import { useAppStore } from '@/store/modules/app'
import { useWebSocketStore } from '@/store/modules/socket'
import { useDriver } from '@/hooks/web/useDriver'
import { getLocalStorage, setLocalStorage, setCacheStorage, getCacheStorage} from '@/utils/storage'
import { gsap } from 'gsap'
import { nextTick } from 'vue'
const ipc = require("electron").ipcRenderer;
const appStore = useAppStore();
const webSocketStore = useWebSocketStore();

const steps = ref([
  {
    element: '.button-group-item.setting',
    popover: {
      title: '设置',
      description: '1',
    }
  },
  {
    element: '.button-group-item.refresh',
    popover: {
      title: '最小化',
      description: '2',
    }
  },
  {
    element: '.button-group-item.message',
    popover: {
      title: '消息',
      description: '3',
    }
  },
  {
    element: '.button-group-item.min',
    popover: {
      title: '最小化',
      description: '4',
    }
  },
  {
    element: '.button-group-item.full-toggle',
    popover: {
      title: '全屏切换',
      description: '5',
    }
  },
  {
    element: '.button-group-item.closed',
    popover: {
      title: '关闭',
      description: '6',
    }
  }
])

const { startDriver, destroyDriver } = useDriver(steps, {
  showProgress: true,
  onDestroyStarted: (driverObj) => {
    if (!driverObj.hasNextStep() || confirm('Are you sure?')) {
      driverObj.destroy();
      setLocalStorage('driverStatus', 'true')
    }
  }
});
onMounted(async () => {
  await nextTick();
  if(!getLocalStorage('driverStatus', true)){
    startDriver();
  }
});

const router = useRouter();

const ws = webSocketStore.getWs;

const handleEnter = (el, done) => {
  gsap.to(el, {
    duration: 0.5,
    opacity: 1,
    scale: 1,
    onComplete: done
  })
}

const handleBeforeEnter = (el, done) => {
  gsap.to(el, {
    duration: 0.5,
    opacity: 0.8,
    scale: 0.8,
    onComplete: done
  })
}

const handleLeave = (el, done) => {
  gsap.to(el, {
    duration: 0.5,
    opacity: 0.8,
    scale: 0.8,
    onComplete: done
  })
}

const handleRefresh = () => {
  ipc.send('window-reload')
}

const handleSetting = () => {
  router.push('/setting')
}

</script>
<template>
  <div class="container">
    <window-bar :title="appStore.title">
      <template #bar-right>
        <user-avatar />
        <div class="button-group-item setting" @click="handleSetting" title="设置">
          <icon icon="ic:baseline-settings" />
        </div>
        <div class="button-group-item refresh" @click="handleRefresh" title="刷新">
          <icon icon="iconamoon:synchronize-bold" />
        </div>
        <div class="button-group-item message" title="消息">
          <a-popover position="br" trigger="click" :content-style="{ padding: '0', width: '360px' }">
            <a-badge :count="9" dot :offset="[2, -2]">
              <icon icon="iconamoon:notification" />
            </a-badge>
            <template #content>
              <notice-tab />
            </template>
          </a-popover>
        </div>
      </template>
    </window-bar>
    <div class="main" id="ng-progress">
      <window-menu />
      <div class="content">
        <router-view v-slot="{ Component }">
          <!-- <transition @before-enter="handleBeforeEnter" @enter="handleEnter"> -->
          <keep-alive>
            <component :is="Component" :key="$route.name" v-if="$route.meta.keepAlive" />
          </keep-alive>
          <component :is="Component" :key="$route.name" v-if="!$route.meta.keepAlive" />
          <!-- </transition> -->
        </router-view>
      </div>
    </div>
  </div>
</template>

<style lang="less">
.container {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;

  .button-group-item {
    display: flex;
    justify-content: center;
    align-items: center;
    width: var(--window-size);
    height: var(--window-size);
    cursor: pointer;
  }

  .main {
    height: calc(100% - var(--window-size));
    display: flex;
    flex-direction: column;

    .content {
      height: calc(100% - 58px);
    }
  }
}

#nprogress .bar {
  height: 4px;
  background-image: linear-gradient(to right, #ed4264, #ffedbc);
}
</style>